<template>
	<view class="product-select" :style="{ '--titleSize': titleSize }">
		
		<view class="option" :style="{ '--col': col, '--color': color, '--clickColor': clickColor, gridColumnGap: colSpan, gridRowGap: rowSpan }">
			<view
				class="select"
				v-for="(item, index) in list"
				:key="index"
				@click="clickThis(item.value, index)"
				:class="{ 'click-style': current==index && isFocus }"
				:style="{ fontSize: optionSize, borderRadius: radius }"
			>
				<view style="position: relative;height: 80px;width: 105px;}" v-if="showImg">
					<!-- <image mode="aspectFill" :src="item[imgSrcKey]" style="width: 100%;height: 100%;"></image> -->
					<view :class="item.c " >
						<view   :class="{ 'zuopin-click-style': current==index }" >
							<view >
								<view :class="item.t">
									<text  :class="{ 'text-click-style': current==index }" > {{item.key}}</text>
								</view>
								<!-- <text :class="item.t" :class="{ 'zuopin_text-click-style': current==index  }"> {{item.key}}</text> -->
								<view v-show="current===index" >
									<image style="top:0px; left: 0;" class="zuopin_img" src="../../static/lanhu_zuopinshezhi/SketchPng683c3ef6f8be6bf70d0589a723eb36473d35d6c80f25b7c1bc5c58c3cea7ac10.png"> </image>
									<image style="top: 0; right: 0;" class="zuopin_img" src="../../static/lanhu_zuopinshezhi/SketchPng055d09ba83feb14ab758678fff19b9b788345bde287d9d2ef95b091e996d2ccd.png"> </image>
									<image style="bottom: 0; left: 0;" class="zuopin_img" src="../../static/lanhu_zuopinshezhi/SketchPng895c9a2668c046f50ad60c5924eb1fc0c981cdf14a0ddc21731eec83d803ac3f.png"> </image>
									<image style="bottom: 0; right: 0;" class="zuopin_img" src="../../static/lanhu_zuopinshezhi/SketchPng5164aea703c0bea8e1daf1c3a50ee9481bb131e4c7cd5d3fbb252fe332bec468.png"> </image>
																	
								</view>
								<view v-show="current!=index" >
									<image style="top:0px; left: 0;" class="zuopin_img" src="../../static/lanhu_zuopinshezhi/SketchPng58a4b8f93dab4816288a6321979dbc010935c2a16bdd79e3c6dd26c320757aee.png"> </image>
									<image style="top: 0; right: 0;" class="zuopin_img" src="../../static/lanhu_zuopinshezhi/SketchPng63571bfc4f7c3e0565cb5636fc0cfd5a366abc1eba288ca91716c860055e678f.png"> </image>
									<image style="bottom: 0; left: 0;" class="zuopin_img" src="../../static/lanhu_zuopinshezhi/SketchPng1dee780911177d933b4243cfb946389f5aaf5f67041a37ae30d0c143c6ace8a6.png"> </image>
									<image style="bottom: 0; right: 0;" class="zuopin_img" src="../../static/lanhu_zuopinshezhi/SketchPnge538fc01d5a2467a28dd8bf08a140c5c5756604e481d5fa1e747ef8af40c8540.png"> </image>
								
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
export default {
	name: 'size-select',
	props: {
		// 图片src的键名
		imgSrcKey: {
			type: String,
			default: 'imgUrl'
		},
		// 回显文字内容的键名
		textKey: {
			type: String,
			default: 'text'
		},
		// 控制选中时是否生效选中样式
		isFocus: {
			type: Boolean,
			default: true
		},
		
		// 是否展示图片
		showImg: {
			type: Boolean,
			default: false
		},
		// 控制每行的最大列数
		col: {
			type: Number,
			validator: num => num >= 2,
			default: 3
		},
		// 回显的数据
		
		// 当前标题
		title: {
			type: String,
			required: true
		},
		// 标题文字大小
		titleSize: {
			type: String,
			default: '32rpx'
		},
		// 选项字体大小
		optionSize: {
			type: String,
			default: '16rpx'
		},
		// 列间距
		colSpan: {
			type: String,
			default: '30rpx'
		},
		// 行间距
		rowSpan: {
			type: String,
			default: '20rpx'
		},
		// 选项字体颜色
		color: {
			type: String,
			default: '#000000'
		},
		// 点击项颜色
		clickColor: {
			type: String,
			default: '#307acf'
		},
		// 圆角
		radius: {
			type: String,
			default: '4px'
		},
		current: {
			type: Number,
			default: () => {
				return 0;
			}
		},
		select_num: {
			type: String,
			default: "3"
		},
	},
	data() {
		return {
			list: [{"key":"16:9","value":[1024,576],"c":"zuopin1","t":"zuopint1"},
				   {"key":"4:3","value":[768,576],"c":"zuopin2","t":"zuopint2"},
				   {"key":"3:4","value":[576,768],"c":"zuopin3","t":"zuopint3"},
				   {"key":"1:1","value":[768,768],"c":"zuopin4","t":"zuopint4"},
				   {"key":"9:16","value":[576,1024],"c":"zuopin5","t":"zuopint5"},
				   {"key":"3:2","value":[768,512],"c":"zuopin6","t":"zuopint6"}],
			
			pre: -1,
			
		};
	},
	methods: {
		clickThis(value, index) {
			
			var q = value
			q.push(index)
			var pre = document.getElementsByClassName("zuopin"+String(this.pre+1))[0]
			if(pre !=undefined){
				pre.style.backgroundColor ="#604EAB";
				// pre.style.color ="#FFFFFFFF";
			}else{
				if(this.pre == -1){
					document.getElementsByClassName("zuopin1")[0].style.backgroundColor ="#604EAB";
				} 
			}
			var qcolor =document.getElementsByClassName("zuopin"+String(index+1))[0];
			qcolor.style.backgroundColor ="#0000000D";
			// qcolor.style.color ="#0000004D";
			this.pre=index
			// this.$emit('update:isFocus', true);
			this.$emit('select', q);
		},
		
	}
};
</script>

<style lang="scss" scoped>
.product-select {
	max-height: 310px;
	box-sizing: border-box;
}
.zuopin1{
	position: absolute; height: 40px; width: 40px; background: rgba(0, 0, 0, 0.05); top: 20px; left: 39px;
	border-radius: 5px;
	
}
.zuopin2{
	position: absolute; height: 30px; width: 40px; background: #604EAB; top: 25px; left: 39px;
	border-radius: 5px;
	
}
.zuopin3{
	position: absolute; height: 40px; width: 30px; background: #604EAB; top: 20px; left: 44px;
	border-radius: 5px;
	
}
.zuopin4{
	position: absolute; height: 28px; width: 40px; background: #604EAB; top: 26px; left: 38px;
	border-radius: 5px;
	
}
.zuopin5{
	position: absolute; height: 40px; width: 28px; background: #604EAB; top: 20px; left: 44px;
	border-radius: 5px;
	
}
.zuopin6{
	position: absolute; height: 27px; width: 40px; background: #604EAB; top: 26px; left: 39px;
	border-radius: 5px;
	
}
.zuopin_img{
	position: absolute; height: 9px; width: 9px;
	
}
.zuopin_text{
	line-height: 40px;
	width: 21px;
	height: 20px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}
.zuopint1{
	line-height: 40px;
	width: 21px;
	height: 20px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
	left: 8px;
	top: 1px;
}
.zuopint2{
	line-height: 40px;
	width: 21px;
	height: 20px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
	left: 8px;
	top: -4px;

}
.zuopint3{
	line-height: 40px;
	width: 21px;
	height: 20px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
		left: 4px;
		top: 1px;
	
}
.zuopint4{
	line-height: 40px;
	width: 21px;
	height: 20px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
		left: 5px;
		top: -3px;
	
}
.zuopint5{
	line-height: 40px;
	width: 21px;
	height: 20px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
		left: 0px;
		top: 1px;
	
}
.zuopint6{
	line-height: 40px;
	width: 21px;
	height: 20px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
		left: 8px;
		top: -4px;
	
}
.title {
	color: #000000;
	font-weight: bold;
}

.option {
	display: grid;
	grid-template-columns: repeat(var(--col), 1fr);
	margin: 20rpx 0;
}

.select {
	// border: 6px solid rgba(229, 229, 229, 1);
	text-align: center;
	color: var(--color);
	background-color: #7963D6;
}

.goods {
	padding: 6rpx 0;
	// width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

}

// 不显示图片时点击选择项的样式
.click-style {
	background-color: #e4e2e9;
}
.zuopin-click-style{
	// background-color: #0000000D;
}
.zuopin_text-click-style{
	color: rgba(0,0,0,0.3);
}
// 显示图片时点击选择项的样式
.click-style > .click-goods {
	background-color: var(--clickColor);
	color: #fff;
}

.tag {
	background-color: #f2f2f2;
}
.text-click-style{
	color: #0000004D;
}
</style>
